<template>
  <div>
    <el-card class="box-card tree-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span">菜单分配</span><span class="tip">（选择指定角色分配菜单）</span>
        <el-button type="primary" class="save" icon="el-icon-check">保 存</el-button>
      </div>
      <el-tree
        ref="menu"
        lazy
        :data="menus"
        :default-checked-keys="menuIds"
        :load="getMenuDatas"
        :props="defaultProps"
        check-strictly
        accordion
        show-checkbox
        node-key="id"
      />
    </el-card>
  </div>
</template>
<script>
import { getMenusTree } from '@/api/system/menu'
export default {
  props: {
    hasPermissions: {
      type: Array,
      default: () => []
    },
    menus: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      menuIds: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    getMenuDatas(node, resolve) {
      setTimeout(() => {
        getMenusTree(node.data.id ? node.data.id : 0).then(res => {
          console.log(res, 'res')
          resolve(res.list)
        })
      }, 100)
    }
  }
}
</script>
<style lang="scss" scoped>
.role-span {
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}
 .tree-card{
  position: relative;
}
.tip{
  color: #999;
  font-size: 12px;
}
.save{
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>
